/* 公共样式 */

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* 导航栏 */
.nav{
	width: 100%;
	height: 50px;
	background-color: rgba(50, 50, 50, 0.3);
	
	/* 导航栏内部的内容都是一行排列的 就需要flex布局来操作*/
	display: flex;
	/* 实现子元素垂直居中 */
	align-items: center;
	
}
/* 给整个页面加上背景图 */

/* 当前html的父元素，就是浏览器窗口
此处的100%意思是html元素的高度和浏览器窗口一样高.
当前body的父元素，就是html
此处的100%意思就是html多高, body就多高 */
html,body{
	height: 100%;
}

body{
	background-image: url("../img/cat.jpg");
	/* 
	repeat	默认 背景图像将在垂直方向和水平方向重复。
	repeat-x	 背景图像将在水平方向重复。
	repeat-y	 背景图像将在垂直方向重复。
	no-repeat	 背景图像将仅显示一次。
	inherit	规定应该从父元素继承 background-repeat 属性的设置。 */
	
	background-repeat: no-repeat;
	
	/* 背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角。 */
	background-position: center center;
	
	background-size: cover;
}


.nav img{
	width: 35px;
	height: 35px;
	border-radius: 20px;
	margin-left: 20px;
	margin-right: 5px;
}

/* 如何实现让元素，一个在左一个在右?
1. CSS里面有一个专门的操作，浮动(float) 但是 (浮动有坑! )
2.如果只有两个元素可以space between
如果是多个元素，就需要更复杂的html结构，包成2个元素~
3. 在左右中间加入一个没有内容的空白元素，设置一个比较大的宽度来进行占位--
(更简单的办法，但是这个办法不太利于“响应式布局”(自动适应不同宽度的浏范器) */

.nav .spacer{
	/* 相对于父元素的宽度 如果父元素(.nav)的宽度为1000px那么70%(.spacer)的宽度就为700px */
	width: 73%;
}

.nav a{
	color: white;
	/* 去掉链接下划线 */
	text-decoration: none;
	/* 字体靠太近了 */
	padding: 0 10px;
}


/* 版心部分 */
.container{
	width: 1000px;
	
	/* 这个写法中，calc()里面左右两侧必须有空格.不能没有，(如果没有，可能无法被浏览器识别
	这个calc是CSS3里面提供的一个内置的函数.
	平时看到的大部分的CSS都是CSS2这个标准中规定的
	但是CSS3又对CSS2进行了一定的扩充
	CSS3现在也存在了很多年主流的浏览器也都支持 */
	height: calc(100% - 50px);
	
	/* 浏览器自适 水平居中 */
	margin: 0 auto;
	
	
	
	/* 弹性布局 */
	display: flex;
	
	/* 均匀排列每个元素
    首个元素放置于起点，末尾元素放置于终点 */
	justify-content: space-between;
	
	/*
	justify-content: space-around;  
	均匀排列每个元素
	每个元素周围分配相同的空间 */
}


.container .left{
	width: 200px;
	height: 100%;
	
	/* 用背景颜色观察背景区域 */
	/* background-color: antiquewhite; */
	
}
.container .right{ 
	
	/* div导致right也独占一行(不使用弹性布局 .left和.right 都会独占一行) 使得页面扩大
	对于div这样的块级元素 默认独占一行
	如果需要让多个div在一行内排列 就需要使用弹性布局（在container内部使用） */
	
	
	/* 使.left和.right中间有一条缝 让width等于790px
	但是这条线在.container的(right的右边)最右边
	所以得使用弹性布局中的 justify-content: space-between 
	 */
	width: 790px;
	height: 100%;
	
	/* 用背景颜色观察背景区域 */
	/* background-color: aquamarine; */
	
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	
	
	
	
	
	overflow: auto;
	
	/* 当博客的内容太多 多出浏览器页面时 会出现滚动条(浏览器窗口上)
	这就导致整个页面都在滚动 背景就不适配了 所以我们得把滚动条放
	到某个元素内 让页面不动  只让元素里的内容滚动 
	在当前博客系统 我们只需要给.right加上css属性:  overfloat:auto就可以了
	overfloat可以理解为溢出
	auto指的是如果内容没满就不加滚动条 如果满了就自动添加
	
	这个滚动在当前界面不是挺好看 有点傻大黑粗 能不能让这个滚动条变的好看一点
	办法也是有的   但是不是CSS标准中提供的内容
	CSS标准(CSS2, CSS3)属于放之四海而皆准"这样的规则  只要是主流浏览器 都会遵守 
	新晋浏览器，也会来遵守 像有些细节内容，标准上没有规定到，浏览器也对这些内容进行了支持和扩展
	就像滚动条的样式  CSS标准里没有属性来进行设置但是主流的浏览器里都提供了相关的方法.
	(不同的浏览器，提供的设置方法，其实会存在差别) */
}




.cart{
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 20px;
	/* 通过内边距可以让图片居中
	这里设置的30px意思是四个反向都是30px */
	padding: 30px;
}
.cart img{
	width: 140px;
	height: 140px;
	border-radius: 50%;
}
.cart h3{
	text-align: center;
}
.cart a{
	/* a默认是行内元素 行内元素的很多边距不生效 例如text-align: center;
	所以直接设为块级元素方便操作 */
	display: block;
	text-align: center;
	text-decoration: none; 
	padding: 15px;
}
.cart .counter{
	display: flex;
	justify-content: space-around;
	padding: 5px;
}